<template>
  <div style="margin:20px 0">
    <div>
      <a-row style="margin:10px 0">通道支持银行配置</a-row>
      <div class="operator">
        <a-button @click="add">+增加</a-button>
      </div>
      <!-- 表格区域 -->
      <a-table
        ref="TableInfo"
        :columns="columns"
        :rowKey="(record) => record.id"
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :scroll="{ x: 900 }"
        @change="handleTableChange"
      >
        <template slot="operation" slot-scope="text, record">
          <a-icon
            type="setting"
            theme="twoTone"
            twoToneColor="#4a9ff5"
            @click="edit(record)"
            title="修改"
          ></a-icon>
          <a-icon
            type="close"
            theme="twoTone"
            twoToneColor="#42b983"
            @click="view(record)"
            title="停用"
          ></a-icon>
          <a-icon
            type="check"
            theme="twoTone"
            twoToneColor="#42b983"
            @click="view(record)"
            title="启用"
          ></a-icon>
          <a-icon
            type="eye"
            theme="twoTone"
            twoToneColor="#42b983"
            @click="view(record)"
            title="查看"
          ></a-icon>
        </template>
      </a-table>
    </div>
    <!-- 新增 -->
    <p-bank-support-cfg-add
      ref="pBankSupportCfgAdd"
      @close="handlePBankSupportCfgAddClose"
      @success="handlePBankSupportCfgAddSuccess"
      :pBankSupportCfgAddVisiable="pBankSupportCfgAdd.visiable"
    ></p-bank-support-cfg-add>
    <!-- 详情 -->
    <p-bank-support-cfg-info
      ref="pBankSupportCfgInfo"
      :pBankSupportCfgInfoVisiable="pBankSupportCfgInfo.visiable"
      @close="handlePBankSupportCfgInfoClose"
    >
    </p-bank-support-cfg-info>
    <!-- 修改 -->
    <p-bank-support-cfg-edit
      ref="pBankSupportCfgEdit"
      @close="handlePBankSupportCfgEditClose"
      @success="handlePBankSupportCfgEditSuccess"
      :pBankSupportCfgEditVisiable="pBankSupportCfgEdit.visiable"
    >
    </p-bank-support-cfg-edit>
  </div>
</template>

<script>
import RangeDate from "../../../../components/datetime/RangeDate";
import PBankSupportCfgAdd from "./PBankSupportCfgAdd";
import PBankSupportCfgEdit from "./PBankSupportCfgEdit";
import PBankSupportCfgInfo from "./PBankSupportCfgInfo";

export default {
  name: "PBankSupportCfg",
  components: { PBankSupportCfgAdd,PBankSupportCfgEdit, PBankSupportCfgInfo, RangeDate },
  data() {
    return {
      advanced: false,
      pBankSupportCfgInfo: {
        visiable: false,
      },
      pBankSupportCfgAdd: {
        visiable: false,
      },
      pBankSupportCfgEdit: {
        visiable: false,
      },
      queryParams: {},
      filteredInfo: null,
      sortedInfo: null,
      paginationInfo: null,
      dataSource: [],
      selectedRowKeys: [],
      loading: false,
      pagination: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
    };
  },
  computed: {
    columns() {
      let { sortedInfo, filteredInfo } = this;
      sortedInfo = sortedInfo || {};
      filteredInfo = filteredInfo || {};
      return [
        {
          title: "机构标识",
          dataIndex: "instId",
          sorter: true,
          sortOrder: sortedInfo.columnKey === "instId" && sortedInfo.order,
          fixed: "left",
          width: 120,
        },
        {
          title: "通道标识",
          dataIndex: "dstChannelId",
          width: 100,
          customRender: (text, row, index) => {
            switch (text) {
              case "UPAL":
                return "银联支付宝";
              case "MOMP":
                return "营销";
              case "FCPT":
                return "查控平台";
              case "IGRT":
                return "智能路由";
              case "NUCC":
                return "网联";
              case "WXZF":
                return "微信直联";
              case "CUPS":
                return "银联CUPS";
              case "UPQC":
                return "银联二维码";
              case "CSPT":
                return "征信服务平台";
              case "NUWX":
                return "网联微信";
              case "ALIP":
                return "支付宝直联";
              case "ACCT":
                return "虚拟账户";
              case "BATH":
                return "批量处理平台";
              case "NCQS":
                return "银联无卡快捷";
              case "ESB":
                return "银行ESB";
              case "NUAL":
                return "网联支付宝";
              case "UPAC":
                return "银联全渠道";
              case "UPWX":
                return "银联微信";
              case "XMUP":
                return "厦门银联";
              case "SZUP":
                return "深圳银联";
              case "HVPS":
                return "大额支付系统";
              case "BEPS":
                return "小额支付系统";
              case "IBPS":
                return "网银互联";
              case "CCBC":
                return "城银清算中心";
            }
          },
        },
        {
          title: "银行机构号",
          dataIndex: "bankNo",
          width: 200,
        },
        {
          title: "银行名称",
          dataIndex: "bankName",
          width: 200,
        },
        {
          title: "银行简码",
          dataIndex: "bankSimpleCode",
          width: 200,
        },
        {
          title: "支持业务类别",
          dataIndex: "supportBizType",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "智能路由";
              case "11":
                return "企业网银业务";
              case "20":
                return "快捷支付业务";
              case "10":
                return "人个网银业务";
            }
          },
        },
        {
          title: "借记账户支持标识",
          dataIndex: "debitSupportFlag",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "Y":
                return "支持";
              case "N":
                return "不支持";
            }
          },
        },
        {
          title: "贷记账户支持标志",
          dataIndex: "creditSupportFlag",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "Y":
                return "支持";
              case "N":
                return "不支持";
            }
          },
        },
        {
          title: "记录状态",
          dataIndex: "recordStatus",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "Y":
                return "启用";
              case "N":
                return "停用";
            }
          },
        },
         {
          title: "银行logo存储路径",
          dataIndex: "bankLogoUrl",
          width: 150,
        },
        {
          title: "参与营销活动标志",
          dataIndex: "mcFlag",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "Y":
                return "参与";
              case "N":
                return "不参与";
            }
          },
        },
         {
          title: "营销活动编号",
          dataIndex: "mcNo",
          width: 150,
        },
         {
          title: "营销活动名称",
          dataIndex: "mcName",
          width: 150,
        },
         {
          title: "单笔交易限额(元)",
          dataIndex: "singleLimitAmt",
          width: 150,
        },
         {
          title: "日累计交易限额(元)",
          dataIndex: "dayLimitAmt",
          width: 150,
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ];
    },
  },
  mounted() {
    this.fetch();
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    toggleAdvanced() {
      this.advanced = !this.advanced;
      if (!this.advanced) {
        this.queryParams.createTimeFrom = "";
        this.queryParams.createTimeTo = "";
      }
    },
    add() {
      this.pBankSupportCfgAdd.visiable = true;
    },
    handlePBankSupportCfgAddClose() {
      this.pBankSupportCfgAdd.visiable = false;
    },
    handlePBankSupportCfgAddSuccess() {
      this.pBankSupportCfgAdd.visiable = false;
      this.$message.success("新增成功");
      this.search();
    },
    view(record) {
      console.log(record);
      this.$refs.pBankSupportCfgInfo.setFormValues(record);
      this.pBankSupportCfgInfo.visiable = true;
    },
    edit(record) {
      this.$refs.pBankSupportCfgEdit.setFormValues(record);
      this.pBankSupportCfgEdit.visiable = true;
    },
    handlePBankSupportCfgEditClose() {
      this.pBankSupportCfgEdit.visiable = false;
    },
    handlePBankSupportCfgEditSuccess() {
      this.pBankSupportCfgEdit.visiable = false;
      this.$message.success("修改成功");
      this.search();
    },
    handlePBankSupportCfgInfoClose() {
      this.pBankSupportCfgInfo.visiable = false;
    },
    handleDeptChange(value) {
      this.queryParams.deptId = value || "";
    },
    handleDateChange(value) {
      if (value) {
        this.queryParams.createTimeFrom = value[0];
        this.queryParams.createTimeTo = value[1];
      }
    },
    batchDelete() {
      if (!this.selectedRowKeys.length) {
        this.$message.warning("请选择需要删除的记录");
        return;
      }
      let that = this;
      this.$confirm({
        title: "确定删除所选中的记录?",
        content: "当您点击确定按钮后，这些记录将会被彻底删除",
        centered: true,
        onOk() {
          let userIds = [];
          let selectedRowKeysStr = "," + that.selectedRowKeys.join(",") + ",";
          userIds.push(
            that.dataSource
              .filter((f) => {
                return selectedRowKeysStr.indexOf("," + f.userId + ",") > -1;
              })
              .map((m) => {
                return m.userId;
              })
          );
          that.$delete("user/" + userIds.join(",")).then(() => {
            that.$message.success("删除成功");
            that.selectedRowKeys = [];
            that.search();
          });
        },
        onCancel() {
          that.selectedRowKeys = [];
        },
      });
    },

    search() {
      let { sortedInfo, filteredInfo } = this;
      let sortField, sortOrder;
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field;
        sortOrder = sortedInfo.order;
      }
      this.fetch({
        sortField: sortField,
        sortOrder: sortOrder,
        ...this.queryParams,
        ...filteredInfo,
      });
    },
    reset() {
      // 取消选中
      this.selectedRowKeys = [];
      // 重置分页
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent;
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent;
        this.paginationInfo.pageSize = this.pagination.defaultPageSize;
      }
      // 重置列过滤器规则
      this.filteredInfo = null;
      // 重置列排序规则
      this.sortedInfo = null;
      // 重置查询参数
      this.queryParams = {};
      // 清空部门树选择
      this.$refs.deptTree.reset();
      // 清空时间选择
      if (this.advanced) {
        this.$refs.createTime.reset();
      }
      this.fetch();
    },
    handleTableChange(pagination, filters, sorter) {
      // 将这三个参数赋值给Vue data，用于后续使用
      this.paginationInfo = pagination;
      this.filteredInfo = filters;
      this.sortedInfo = sorter;

      this.userInfo.visiable = false;
      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...this.queryParams,
        ...filters,
      });
    },
    fetch(params = {}) {
      // 显示loading
      this.loading = true;
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current;
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize;
        params.pageSize = this.paginationInfo.pageSize;
        params.pageNum = this.paginationInfo.current;
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize;
        params.pageNum = this.pagination.defaultCurrent;
      }
      //   this.$get("pBankSupportCfgInfo", {
      //     ...params,
      //   }).then((r) => {
      //     let data = r.data;

      let data = {
        content: [
          {
            instId: "001",
            dstChannelId: "UPAL",
            dstChannelName: "银联支付宝",
            dstServiceName: "CupsAlipayClientService",
            dstChannelStatus: "Y",
            fusingEnableFlag: "Y",
            bizStartDate: "20200715",
            bizCtrlRule: "0",
            bizStartTime: "*",
            bizEndTime: "*",
            intelligentRouteFlag: "N",
            supportAcctType: "",
            txnDelayType: "1",
            maxSupportNum: 100,
            channelTimeout: 60,
            secPlanId: "",
            stopReason: "",
            createTime: "2020-10-01 00:00:00.000",
            updateTime: "2020-11-18 19:17:36.504",
            remark1: "",
            remark2: "",
            optFlag: null,
            channelTxn: null,
            bizTimeFlag: "N",
            pBankSupportCfg: null,
            supportBizType: null,
            dstChannelType: null,
            secPlanType: null,
            supportAcctTypeList: null,
            pbankSupportCfg: null,
          },
        ],
        last: false,
        totalPages: 234,
        totalElements: 3506,
        first: true,
        numberOfElements: 2,
        sort: [
          {
            direction: "DESC",
            property: "id",
            ignoreCase: false,
            nullHandling: "NATIVE",
            ascending: false,
          },
        ],
        size: 2,
        number: 0,
      };
      const pagination = { ...this.pagination };
      pagination.total = data.size;
      this.dataSource = data.content;
      this.pagination = pagination;
      // 数据加载完毕，关闭loading
      this.loading = false;
      //   });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";
</style>
